/**
* 此页面用于nft身份和nft权益的展示
根据传递过来的类型进行页面的加载判断
exhibitionType: identity(身份)无兑换按钮
benefit(权益) 有兑换按钮
*/
<template>
	<view class="nft_container_bg">
		<view class="nft_detail">
			<!-- 商品图片 -->
			<view class="nft_cover">
				<view class="nft_img">
					<image :src="exhibitionInfo.metadataUrl" mode=""></image>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="nft_info">
				<view class="nft_info_title">
					<view class="">
						{{ exhibitionInfo.name }}
					</view>
					<view class="nft_num">
						总量 {{ exhibitionInfo.totalSupply || exhibitionInfo.number}}
					</view>
				</view>
				<!-- 描述 -->
				<view class="nft_info_describe">
					<!-- 描述头部 -->
					<view class="describe_title">
						图文信息
					</view>
					<view class="describe_image">
						<image :src="exhibitionInfo.metadataUrl" mode=""></image>
					</view>
					<!-- 身份达成条件 -->
					<view class="describe_conent" v-if="exhibitionType == 'identity'">
						<view class="info_title">达成条件</view>
						<view class="">{{reachConditions}}</view>
					</view>
					<!-- 权益相关信息-->
					<view class="describe_conent" v-if="exhibitionType == 'benefit'">
						<view class="info_title">权益信息</view>
						<view class="">1.生效日期: {{exhibitionInfo.startTime}} 至 {{exhibitionInfo.endTime}}</view>
						<view class="">2.权益类型: 本产品类型为{{exhibitionInfo.type == '0' ? '票务' : '商品'}}</view>
						<view class="">3.限购数量: 每人限制购买{{exhibitionInfo.restrictedPurchase}}个</view>
					</view>
					<!-- 描述内容 -->
					<view class="describe_conent">
						<view class="info_title">基本简介</view>
						<view class="">{{ exhibitionInfo.description }}</view>
					</view>
				</view>
			</view>
			<!-- 兑换：权益 -->
			<view class="buy_bar" v-if="exhibitionType == 'benefit'">
				<u-button type="primary" text="立即兑换" color="var(--echo-main-color)" shape="circle" @click="toExchange">
				</u-button>
			</view>
			<!-- 分享 身份 -->
			<view class="buy_bar" v-if="exhibitionType == 'identity'">
				<u-button type="primary" text="立即分享" color="var(--echo-main-color)" shape="circle"
					@click="canvasImage.toShare">
				</u-button>
			</view>
		</view>
		<!-- 分享弹出框 -->
		<u-modal :show="isShareBoxShow" closeOnClickOverlay @close="closeShareBox" negativeTop="60rpx"
			:showConfirmButton="false">
			<img class="saveImage" :src="posterUrl" alt="" @load="_hideLoading" />
		</u-modal>
		<share-card id="pagePoster" :urlQrcode="urlQrcode" v-if="isNftShare" :nftDetailsInfo="nftDetailsInfo"
			style="position:absolute;z-index: -999; top: 0;">
		</share-card>
	</view>
</template>

<script lang="renderjs" module="canvasImage">
	import html2canvas from 'html2canvas'
	import {
		getPositionDetails,
	} from '@/config/nftApi.js';
	import {
		getRightsInterestsDetails,
		exchangeIn
	} from '@/config/rightsInterestsApi.js';
	export default {
		data() {
			return {
				// 展示类型
				exhibitionType: '',
				// 请求来的展示信息
				exhibitionInfo: {},
				// 分享模态框
				isShareBoxShow: false,
				// 用户标识
				// customerNo: '1518474394966560768',
				customerNo: '',
				// 达成条件
				reachConditions: '',
				// 生成画布的图片
				posterUrl: '',
				// 二维码地址
				urlQrcode: ''
			}
		},
		created() {
			// 客户编号
			this.customerNo = uni.getStorageSync('customerNo')
		},
		onLoad({
			// 展示类型
			exhibitionType,
			// 等级用于身份详情查询
			grade,
			// 权益编号
			serialNo
		}) {
			// 取租户ID
			let tenantId = getApp().globalData.tenantId
			var grade = Number(grade)
			console.log(exhibitionType)
			this.exhibitionType = exhibitionType
			if (this.exhibitionType == 'identity') {
				// 身份详情
				getPositionDetails({
					tenantId,
					grade
				}).then(res => {
					console.log("res", res)
					if (res) {
						this.exhibitionInfo = res.data
						console.log(this.exhibitionInfo.condition.fc)
						this.reachConditions =
							` 拥有火源不少于${this.exhibitionInfo.condition.fs} 拥有原力不少于${this.exhibitionInfo.condition.fc} 拥有声誉不少于${this.exhibitionInfo.condition.reputation}`
					}
				})
				return
			}
			// 权益详情
			getRightsInterestsDetails({
				serialNo
			}).then(res => {
				console.log(res)
				if (res) {
					this.exhibitionInfo = res.data
				}
			})
		},
		// onReady() {
		// 	wx.config({
		// 		debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
		// 		appId: 'wx581d0c32a8c783a1', // 必填，公众号的唯一标识
		// 		timeStamp: "1395712654", // 必填，生成签名的时间戳
		// 		nonceStr: 'e61463f8efa94090b1f366cccfbbb444', // 必填，生成签名的随机串
		// 		signature: 'MD5', // 必填，签名，见附录1
		// 		jsApiList: ["updateAppMessageShareData",
		// 			"updateTimelineShareData"
		// 		], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		// 	})
		// 	wx.ready(function() { //需在用户可能点击分享按钮前就先调用
		// 		wx.updateTimelineShareData({
		// 			title: 'chen', // 分享标题
		// 			link: 'h5.huoyuanshequ.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		// 			imgUrl: '我的', // 分享图标
		// 			success: function() {
		// 				// 设置成功
		// 			}
		// 		})
		// 	})
		// },
		methods: {
			// 关闭模态框
			closeShareBox() {
				this.isShareBoxShow = false
			},

			// 提示弹窗
			_showToast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				});
			},

			// 显示loading
			_showLoading(str) {
				this.posterUrl = '';
				uni.showLoading({
					title: str
				});
			},

			// 隐藏loading
			_hideLoading() {
				uni.hideLoading();
				// #ifdef H5
				this._showToast('长按保存图片');
				// #endif
			},

			// 分享 打开模态框
			toShare(e, ownerFun) {
				ownerFun.callMethod('_showLoading', '正在生成海报') // 生成图片的 loading 提示
				setTimeout(() => {
					const dom = document.getElementById('pagePoster') // 需要生成图片内容的 dom 节点
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域
						// scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					}).then((canvas) => {
						// 生成成功
						// html2canvas 生成成功的图片链接需要转成 base64位的url
						ownerFun.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
						this.isShareBoxShow = true
					}).catch(err => {
						// 生成失败 弹出提示弹窗
						ownerFun.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			},
			receiveRenderData(val) {
				this.posterUrl = val.replace(/[\r\n]/g, ''); // 去除base64位中的空格
			},
			download() {},
			// 兑换权益
			toExchange() {
				exchangeIn({}).then(res => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nft_container_bg {
		min-height: 100vh;
		background: $echo-nft-bg-color;

		.nft_detail {
			color: #fff;

			.nft_cover {
				min-height: 740rpx;
				background-color: $echo-nft-card-bg-color;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				.nft_img {
					width: 400rpx;
					height: 400rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.nft_info {
				padding: 40rpx;
				position: relative;
				top: -120rpx;
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
				min-height: 1000rpx;
				background: $echo-nft-bg-color;

				.nft_info_title {
					font-size: 38rpx;

					.nft_num {
						font-weight: 700;
						margin-top: 20rpx;
					}
				}

				.nft_info_describe {

					// 描述标题
					.describe_title {
						text-align: center;
						color: #999;
						font-size: 28rpx;
						margin: 50rpx;
					}

					// 描述图
					.describe_image {
						height: 300rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					// 标题
					.info_title {
						font-size: $echo-font-size-title;
						margin-top: 40rpx;
					}

					// 描述文字
					.describe_conent {
						font-size: $echo-font-size-conent;
						line-height: 60rpx;
					}
				}
			}

			// 购买
			.buy_bar {
				padding: 40rpx;
				box-sizing: border-box;
			}
		}

		// 分享
		.shareBox {
			width: 100%;
			height: 1200rpx;

			// 外边框
			.shareBoxBorder_outside {
				width: 100%;
				height: 100%;
				border: 4rpx solid #333;
			}

			// 内边框
			.shareBoxBorder_within {
				width: 100%;
				height: 100%;
				padding: 10rpx;
				box-sizing: border-box;
			}

			// 内容
			.shareBox_conent {
				position: relative;
				width: 100%;
				height: 100%;
				border: 2rpx solid #333;
				padding: 40rpx;
				box-sizing: border-box;

				&_logo {
					text-align: right;
					font-size: 30rpx;
					font-weight: 700;
					letter-spacing: 6rpx;
				}

				// 封面图片
				&_img {
					width: 400rpx;
					height: 400rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				// 基本信息
				&_info {
					view {
						margin-top: 20rpx;
					}
				}

				&_option {
					display: flex;
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
				}

			}
		}
	}
</style>
